@import "reset.less";
@import "fnList.less";
@import "varList.less";

body{
    .skeleton();
}
@{header} {
    .flexible(88, height);
    @{background}: #1448ae;
    .width();
    .box-sizing();
    .flexible(12, font-size);

    .search-destination {
        .width();
        white-space  : nowrap;
        overflow     : hidden;
        text-overflow: ellipsis;
        width        : 95%;
        .flexible(44, height);
        .margin(0);
        // .border-box();
        .flex();
        // padding:8px 0;
        //    .flex-justify();
        .flex-align();
        .icon-head {
            .flexible(0, font-size);
            .flexible(30, width);
            .flexible(25, height);
            .block();
            background: url(../images/icon/sprites.png) no-repeat -0.45rem -0.12rem;
            .backgroundSize(3.75rem, 4.57rem);
        }

        p {
            .color(#fff);
            .margin(0);
            .flexible(16, font-size);
            text-align: center;
            width     : 100%;
        }
    }

    .search-box {
        .width();
        .flex-align();
        .border-box(1px, solid, #6486C8);
        position: relative;
        width   : 95%;
        .flexible(30, height);
        .margin(0);
        line-height: 0.3rem;
        .border-radius(40, 40);
        padding-left: 0.4rem;
        .flexible(10, font-size);
        .color(#a4aed2);
        white-space  : nowrap;
        overflow     : hidden;
        text-overflow: ellipsis;

        .icon-search {
            position: absolute;
            left    : 0.14rem;
            top     : 0.05rem;
            .flexible(20, width);
            .flexible(20, height);
            .background("galss_03.png");
            .backgroundSize(100%, 100%);

        }
    }

}

@{section} {
    @{background}: #ffffff;
    margin-bottom: 0.6rem;
    .width();
    .box-sizing;
    .flexible(16, font-size);
    .flex();

    justify-content: space-around;
    .search-travel {
        text-align: center;
        width     : 18%;

        @{background}: #f4f4f4;

        .search-left_nav {
            &:nth-of-type(1){
                @{background}: #ffffff;
                border-left: 2px solid #f7c612;
            }
            a{
                .color(grey);
            }
               &:hover{
                @{background}: #ffffff;
                border-left: 2px solid #f7c612;
            
               }
               &:hover a{
                .color(hsl(227, 83%, 55%));
               }
            // .border-box(1px, solid, #000000);
            .flexible(80, height);
            &:hover i:nth-child(1) {
                background: url(../images/icon/sprites.png) no-repeat -2.255rem -0.84rem;
                .backgroundSize(3.75rem, 4.57rem);
            }
            &:nth-child(2):hover i:nth-child(1){
                background: url(../images/icon/sprites.png) no-repeat -2.686rem -0.84rem;
                .backgroundSize(3.75rem, 4.57rem);
            }
            &:nth-child(3):hover i:nth-child(1) {
                background: url(../images/icon/sprites.png) no-repeat -3.10rem -0.84rem;
                .backgroundSize(3.75rem, 4.57rem);
            }
            &:nth-child(1) i {
                .flexible(0, font-size);
                .inline-block();
                margin-top: 0.09rem;
                .flexible(30, width);
                .flexible(30, height);
                background: url(../images/icon/sprites.png) no-repeat -2.26rem -0.47rem;
                .backgroundSize(3.75rem, 4.57rem);
            }


            &:nth-child(2) i {
                .flexible(0, font-size);
                .inline-block();
                margin-top: 0.09rem;
                .flexible(30, width);
                .flexible(30, height);
                background: url(../images/icon/sprites.png) no-repeat -2.68rem -0.47rem;
                .backgroundSize(3.75rem, 4.57rem);
            }


            &:nth-child(3) i {
                .flexible(0, font-size);
                .inline-block();
                margin-top: 0.09rem;
                .flexible(30, width);
                .flexible(30, height);
                background     : url(../images/icon/sprites.png) no-repeat -3.11rem -0.47rem;
             
                background-size: 3.75rem 4.57rem;

            }

            a {
                .block();
                .flexible(12, font-size);
            }

        }

    }
}

.search-right_nav {
    width      : 90%;
    padding-top: 0.09rem;
    .flexible(14, font-size);

    ul {
        width    : 100%;
        display  : flex;
        flex-wrap: wrap;
        .padding-space(0, 2);
        text-align: center;

        li {
            width: 49%;
            .margin-space(1, 1);
            .border-box(1px, solid, #DCDCDC);
            a {
                .block();
                // height: 0; 
                .flexible(0, height);
                padding-bottom: 72.22%;
            }

            p{
                .margin-space(6,0);
            }
            img {
                .block();
                .width();
                // border: 1px solid blue;
            }
        }
    }


}

// 底部
// @{footer} {
//     .flexible(14, font-size);
//     .width();
//     position     : fixed;
//     bottom       : 0rem;
//     left         : 0;

//     @{background}: #f4f4f4;
//     .padding-space(3, 0);

//     ul {
//         .flex();
//         justify-content: space-around;
//         text-align     : center;

//         li {
//             &:hover span{
//                 .color(hsl(227, 83%, 55%));
//               }
//             i {
//                 .inline-block();
//                 .flexible(30, width);
//                 .flexible(30, height);
//                 // border: 1px solid seagreen;
//             }

//             &:nth-child(1) i {
//                 .background("footer_0322_05.png");
//                 .backgroundSize(100%, 100%);
//             }

//             &:nth-child(1) i:hover {
//                 .background("footer_0322_01.png");
//                 .backgroundSize(100%, 100%);
//             }

//             &:nth-child(2) i {
//                 .background("footer_0322_06.png");
//                 .backgroundSize(100%, 100%);
//             }

//             &:nth-child(2) i:hover {
//                 .background("footer_0322_02.png");
//                 .backgroundSize(100%, 100%);
//             }

//             &:nth-child(3) i {
//                 .background("footer_0322_07.png");
//                 .backgroundSize(100%, 100%);
//             }

//             &:nth-child(3) i:hover {
//                 .background("footer_0322_03.png");
//                 .backgroundSize(100%, 100%);
//             }

//             &:nth-child(4) i {
//                 .background("footer_0322_08.png");
//                 .backgroundSize(100%, 100%);
//             }

//             &:nth-child(4) i:hover {
//                 .background("footer_0322_04.png");
//                 .backgroundSize(100%, 100%);
//             }

//             span {
//                 .block();
//             }
//         }
//     }
// }

// 新底部
footer{
    .width();
    .flexible(50,height);
    .flexible(11,font-size);
    .box-sizing();
    .padding-space(8,24);
    background:#ededed;
    .position-footer();
    ul{
        .flex();
        .flex-justify();
        .flex-align();
        li{
            a{
                .block();
                .textalign();
                .color(#666);
                span{
                    .block();
                    .flexible(26,width);
                    .flexible(23,height);
                    .margin(0);
                }
                .img-index{
                    background: url("../images/icon/footer_0322_05.png") no-repeat;
                    .backgroundSize(100%,100%);
                }
                .img-search{
                    background: url("../images/icon/footer_0322_02.png") no-repeat;
                    .backgroundSize(100%,100%);
                }
                .img-history-active{
                    background: url("../images/icon/footer_0322_07.png") no-repeat;
                    .backgroundSize(100%,100%);
                }
                .img-myinfo{
                    background: url("../images/icon/footer_0322_08.png") no-repeat;
                    .backgroundSize(100%,100%);
                }
                p{
                    .letter-spacing(2);
                }
            }
            .search{
                p{
                    .color(#1448AE);
                }
            }
        }
    }
}